<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="knockout-2.1.0.js" type="text/javascript"></script>

<p>
    Name:
    <b data-bind="visible: !editing(), text: name, click: edit">&nbsp;</b>
    <input data-bind="visible: editing, value: name, hasFocus: editing" />
</p>
<p><em>Click the name to edit it; click elsewhere to apply changes.</em></p>


<script>
    function PersonViewModel(name) {
        // Data
        this.name = ko.observable(name);
        this.editing = ko.observable(false);

        // Behaviors
        this.edit = function () { this.editing(true) }
    }

    ko.applyBindings(new PersonViewModel("Bert Bertington"));

</script>
